<template>
  <div class="sucLottie" v-if="animShow">
    <div class="lottle">
      <lottie
        :options="option1"
        :width="width"
        :height="height"
        v-on:animCreated="handleAnimation1"
      />
    </div>
    <div class="lottle">
      <lottie
        :options="option2"
        :width="width"
        :height="height"
        v-on:animCreated="handleAnimation2"
      />
    </div>
  </div>
</template>

<script>
import firework2 from "../../assets/firework2.json"
import firework3 from "../../assets/firework3.json"
import { mapGetters, mapActions } from "vuex"
export default {
  data() {
    return {
      width: this.windowWidth,
      height: this.windowHeight,
      option1: { animationData: firework2, loop: false, autoplay: false },
      option2: { animationData: firework3, loop: false, autoplay: false },
      anim1: {},
      anim2: {},
      animShow: false
    }
  },
  computed: {
    ...mapGetters("assignmentStatus", {
      sucLottie: "getSucLottie"
    })
  },
  methods: {
    handleAnimation1: function (anim) {
      this.anim1 = anim
      this.anim1.setSpeed(1)
    },
    handleAnimation2: function (anim) {
      this.anim2 = anim
      this.anim2.setSpeed(1)
    }
  },
  watch: {
    sucLottie: function (bool) {
      if (bool) {
        this.animShow = true
        setTimeout(() => { this.anim1.play() }, 0)
        setTimeout(() => { this.perfectMusic() }, 100)
        setTimeout(() => { this.anim2.play() }, 500)
      }
      else {
        this.animShow = false
        this.anim1.stop()
        this.anim2.stop()
      }
    }
  }
}
</script>

<style scoped lang='stylus'>
.sucLottie
  position absolute
  z-index 100
  width 100vw
  height 100vh
  transform-origin 50% 100vh
  transform translate3d(calc(0px - var(--X)), calc(0px - var(--Y)), 0) scale(1.6)
  .lottle
    position absolute
</style>
